.sandbox {
  &__title {
    margin-top: rem(80);
    margin-bottom: rem(30);
    color: var(--a-mainAccent);
  }
  &__subtitle {
    margin-bottom: rem(50);
    color: var(--a-headerText);
    user-select: none;
  }

  &__section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: rem(30) rem(12);
    margin-bottom: rem(30);
    background-color: var(--a-bgLight);
    overflow: hidden;
    &-text {
      margin-bottom: rem(18);

      span {
        padding-left: rem(20);
        font-weight: bold;
      }
    }

    &-pages-links {
      @include flex-column;

      background-color: var(--a-white);
      border: rem(1) solid var(--a-borderLight);
    }
  }

  &__links-title {
    margin-bottom: rem(20);
    user-select: none;
  }

  &__pages-links {
    display: flex;
    flex-wrap: wrap;
    gap: rem(20);

    &-item {
      @include flex;

      padding: rem(5) rem(12);
      color: var(--a-accentText);
      background-color: var(--a-bgAccentLight);
    }
  }

  &__counter {
    @include flex;

    min-width: rem(60);
    min-height: rem(60);
  }

  &__btn {
    @include flex;

    &-count {
      min-width: rem(60);
      min-height: rem(60);
      background-color: var(--a-bgAccent);
    }
  }

  &__label {
    margin-right: rem(12);
  }

  &__text {
    margin-left: rem(20);

    span {
      margin-left: rem(40);
      color: var(--a-accentText);
    }
  }

  &__block {
    @include flex;

    width: 100%;
    min-height: rem(60);
  }
  &__input {
    @include flex;

    padding: rem(4) rem(20);
    border: rem(1) solid var(--a-borderMain);
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    gap: rem(20) rem(10);
  }

  &__item {
    @include flex;

    padding: rem(10) rem(20);
    background-color: var(--a-mainBg);
  }

  &__swiper {
    min-height: rem(390);
    margin-top: rem(30);
    background-color: var(--a-bgAccentLight);
  }
}
